<script setup lang='ts'>
import { useGetissuesInfo } from '@fl/api/bidding-api'

import Footer from '../footer/footer.vue'

const { query } = useRoute()

const { id } = query
const { data } = useGetissuesInfo(toRef(id as string))
const detail = computed(() => {
    if (data.value) {
        return data.value.data
    }
    return {}
})
const customerList = [{ name: 'root-index', title: '首页' }, { name: 'root-issure', title: '用户反馈' }, { name: 'root-issure-detail', title: '反馈详情' }]
</script>

<template>
    <div class="pl-[10%] pr-[10%] pt-20px">
        <breadCrumb :customer-list="customerList" />

        <ElCard class="pl-20 pr-20 mt-20px"
                shadow="never"
        >
            <ElCard class="pl-20 pr-20 mt-20px"
                    shadow="never"
            >
                <div class="tenderApplication">
                    <div class="font-size-20 font-bold">
                        问题描述
                    </div>

                    <div style="min-height: 50px;margin-top: 20px"
                         class="p-10px bg-#F7F8FA color-black"
                         v-html="detail.description"
                    />

                    <div>
                        <el-image v-for="(item) in detail.descriptionFiles"
                                  :key="item.fileUrl"
                                  class="m-10px h-100px w-100px"
                                  :src="item.fileUrl"
                                  :zoom-rate="1.2"
                                  :max-scale="7"
                                  :min-scale="0.2"
                                  :preview-src-list="detail.descriptionFiles.map(item => item.fileUrl)"
                                  :initial-index="4"
                                  fit="cover"
                        />
                    </div>

                    <div class="detail mr-30 mt-10 color-#86909C">
                        <span>提出时间：{{ detail.submissionTime }}</span>
                    </div>
                </div>
            </ElCard>

            <ElCard v-if="detail?.replyContent && detail?.replyContent.length > 0"
                    class="pl-20 pr-20 mt-20px"
                    shadow="never"
            >
                <div class="tenderApplication">
                    <div class="font-size-20 font-bold">
                        回复内容
                    </div>

                    <div style="min-height: 50px;margin-top: 20px"
                         class="p-10px bg-#F7F8FA color-black"
                         v-html="detail?.replyContent"
                    />

                    <div>
                        <el-image v-for="(item) in detail?.replyFiles"
                                  :key="item.fileUrl"
                                  class="m-10px h-100px w-100px"
                                  :src="item.fileUrl"
                                  :zoom-rate="1.2"
                                  :max-scale="7"
                                  :min-scale="0.2"
                                  :preview-src-list="detail.descriptionFiles.map(item => item.fileUrl)"
                                  :initial-index="4"
                                  fit="cover"
                        />
                    </div>

                    <div class="detail mr-30 mt-10 color-#86909C">
                        <span>回复时间：{{ detail.replyTime }}</span>
                    </div>
                </div>
            </ElCard>
        </ElCard>
    </div>

    <Footer />
</template>

<style scoped lang="scss">
.tenderApplication {
    .status,
    .title {
        text-align: center;
        font-weight: bold;
        font-size: 30px;
        margin-right: 10px;
    }

    .detail {
        display: flex;
        justify-content: flex-start;
    }

    .footer {
        text-align: right;
    }
}
</style>
